<!-- 检尺码单 -->
<template>
    <div class="container">
        <div class="search_form">
            <div>
                <!-- 头部搜索模块 -->
                <headerSearch :selectObj="selectObject" :isShowAdd="menuFlag" :goSearchFc="searchClick" />
            </div>
        </div>
        <div class="workLineInfo_Plan" style="margin-bottom: 10px">
            <div style="border: 1px solid rgba(225, 228, 235, 1)">
                <!-- 中间表格模块 -->
                <BaseTable ref="baseTableCheckRef" :data="settlementtableData" :columns="cullCodetableDataColumns"
                    :tableHeight="tableHeight" :loading="loading" @details="handlerClick" :pagination="queryAll"
                    @size-change="sizeChange" @current-change="pageChange"></BaseTable>
            </div>
        </div>
        <div>
            <el-tabs type="border-card">
                <el-tab-pane label="卸船检尺">
                    <div style="border: 1px solid rgba(225, 228, 235, 1)">
                        <BaseTable :data="shipUnloadingTableData" :columns="shipUnloadingColumns" :tableHeight="tableHt"
                            :pagination="false"></BaseTable>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="发货检尺">
                    <div style="border: 1px solid rgba(225, 228, 235, 1)">
                        <BaseTable :data="deliverGoodsTableData" :columns="deliverGoodsColumns" :tableHeight="tableHt"
                            :pagination="false"></BaseTable>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 码单详情 -->
        <el-drawer :before-close="handleClose" title="码单详情" :visible.sync="drawerInner" direction="rtl" size="72%">
            <el-form ref="addSearch" size="mini" :model="queryAll1" inline style="padding:10px 20px">
                <el-form-item label="日期">
                    <el-date-picker v-model="queryAll1.workDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择日期"
                        style="width: 130px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="班次">
                    <el-select size="mini" clearable placeholder="请选择班次" v-model="queryAll1.workTime" style="width: 130px;">
                        <el-option v-for="(item, index) in workTimeList" :key="index" :label="item.dictLabel"
                            :value="item.dictValue"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClickMd()" icon="el-icon-search">查询</el-button>
                </el-form-item>
            </el-form>
            <BaseTable ref="baseTableCheckRef" :data="codeListtableData" :columns="codeListDataColumns"
                :tableHeight="tableHeight2" :loading="loading" :pagination="queryAll1" @size-change="sizeChange1"
                @current-change="pageChange1"></BaseTable>
        </el-drawer>
</div>
</template>

<script>

import headerSearch from '@/components/headerSearch'
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public'
import api from '@/api/yardTally/cullCodeList'
import dfilters from '@/libs/Utils.js'
export default {
  components: {
    BaseTable,
    headerSearch
  },
  data() {
    var that = this
    return {
      loading: false,
      menuFlag: false,
      // 搜索框显示对象
      selectObject: [
        {
          name: '船名航次',
          type: 'select',
          modelName: 'shipvoyageName',
          selectData: [],
          selectLabel: 'shipvoyageName',
          selectValue: 'shipvoyageName'
        },
        {
          name: '船代',
          type: 'select',
          modelName: 'customerName',
          selectData: [],
          selectLabel: 'customerName',
          selectValue: 'customerName'
        }
      ],
      settlementtableData: [],
      cullCodetableDataColumns: [ // table表头
        {
          prop: 'shipvoyageName',
          label: '船名航次'
        },
        {
          prop: 'customerName',
          label: '船代',
          isShort: true
        },
        {
          prop: 'cargoOwnerName',
          label: '货主',
          isShort: true
        },
        {
          prop: 'cargoCategoryName',
          label: '货种'
        },
        {
          prop: 'berthTime',
          label: '靠泊时间',
          width: 200
        },
        {
          prop: 'zgs',
          label: '卸船总根数'
        },
        {
          prop: 'volume',
          label: '检尺材积'
        },
        {
          prop: 'yjzm',
          label: '已检整木'
        },
        {
          prop: 'wjzm',
          label: '未检整木'
        },
        {
          prop: 'yjdm',
          label: '已检断木'
        },
        {
          prop: 'wjdm',
          label: '未检断木'
        },
        {
          prop: 'yfhgs',
          label: '已发货根数'
        }],
      queryAll: {
        totalNum: 0,
        startpage: 1,
        pagesize: 10
      },
      shipUnloadingTableData: [],
      // table的高
      tableHeight: window.innerHeight - 500,
      tableHeight2: window.innerHeight - 200,
      tableHt: 200,
      shipUnloadingColumns: [
        {
          prop: 'cargoOwnerName',
          label: '货主'
        },
        {
          prop: 'zgs',
          label: '总根数'
        },
        {
          prop: 'volume',
          label: '检尺材积'
        },
        {
          prop: 'cargoName',
          label: '货名'
        },
        {
          prop: 'yjdm',
          label: '已检断木'
        },
        {
          prop: 'wjdm',
          label: '未检断木'
        },
        {
          prop: 'yjzm',
          label: '已检整木'
        },
        {
          prop: 'wjzm',
          label: '未检整木'
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                calss: 'btnClass'
              },
              [
                h('el-link', {
                  props: {
                    type: 'primary',
                    underline: false
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: `<span  style='padding-left:5px;'>码单详情</span>`
                  },
                  on: {
                    click: () => {
                      this.locationUpdateModel('0', params.$index, params.row)
                    }
                  }
                })

                // h('el-button', {
                //     props: {
                //         size: 'mini'
                //     },
                //     domProps: {
                //         innerHTML: `<span style='color:#F75E5E;'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>完工证</span></span>`
                //     },
                //     on: {
                //         click: () => {
                //             this.handleDelete('2', params.row.id)
                //         }
                //     }
                // })
              ]
            )
          }
        }
      ],
      drawerInner: false,
      deliverGoodsTableData: [],
      deliverGoodsColumns: [
        {
          prop: 'cargoOwnerName',
          label: '货主'
        },
        {
          prop: 'yfhgs',
          label: '已发货根数'
        },
        {
          prop: 'yjdm',
          label: '已检断木'
        },
        {
          prop: 'wjdm',
          label: '未检断木'
        },
        {
          prop: 'yjzm',
          label: '已检整木'
        },
        {
          prop: 'wjzm',
          label: '未检整木'
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                calss: 'btnClass'
              },
              [
                h('el-link', {
                  props: {
                    type: 'primary',
                    underline: false
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: `<span  style='padding-left:5px;'>码单详情</span>`
                  },
                  on: {
                    click: () => {
                      this.locationUpdateModel('1', params.$index, params.row)
                    }
                  }
                })
                // h('el-button', {
                //     props: {
                //         size: 'mini'
                //     },
                //     domProps: {
                //         innerHTML: `<span style='color:#F75E5E;'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>完工证</span></span>`
                //     },
                //     on: {
                //         click: () => {
                //             this.handleDelete('2', params.row.id)
                //         }
                //     }
                // })
              ]
            )
          }
        }
      ],
      codeListtableData: [],
      codeListDataColumns: [
        {
          prop: 'seqNo',
          label: '编号'
        },
        {
          prop: 'isBroken',
          label: '是否断木',
          render(h, params) {
            if (params.row.isBroken == 'Y') {
              return h('span', {
                domProps: {
                  innerHTML: '是'
                }
              })
            }
            return h('span', {
              domProps: {
                innerHTML: '否'
              }
            })
          }
        },
        {
          prop: 'lengthWood',
          label: '长度'
        },
        {
          prop: 'diameterWood',
          label: '径级'
        },
        {
          prop: 'volume',
          label: '材积'
        },
        {
          prop: 'bc',
          label: '班次',
          width: 200
        },
        {
          prop: 'jcy',
          label: '检尺员',
          width: 200
        },
        {
          prop: 'copyName',
          label: '抄码员'

        }
      ],
      workTimeList: [],
      invoiceMsg: '',
      title: '',
      queryAll1: {
        totalNum: 0,
        startpage: 1,
        pagesize: 10,
        workDate: '',
        workTime: ''
      },
      cargoInfoId: '',
      cullListStatus: ''
    }
  },
  async activated() {
    this.getShipvoyage()
    this.getCustomer()
    this.getDictData()
  },
  methods: {
    /**
     * 获取船名航次
     */
    async getShipvoyage() {
      const res = await publicapi.getListShipvoyage()
      this.shipVoyageData = res.data.data
      this.selectObject[0].selectData = this.shipVoyageData
    },
    /**
     * 获取船代
     */
    async getCustomer() {
      const res = await publicapi.getlistCustomer()
      this.customerData = res.data.data
      this.selectObject[1].selectData = this.customerData
    },
    // 查询字典信息
    getDictData() {
      publicapi.getDictData('SCHEDULE').then(res => {
        this.workTimeList = res.data.data.SCHEDULE
      })
    },
    // 获取数据
    async getDataList() {
      this.loading = true
      this.invoiceMsg = ''
      this.$refs.baseTableCheckRef.clearSelection()
      await api.listPages(this.queryAll).then(res => {
        if (res.status == '200') {
          this.queryAll.startpage = res.data.data.pageNum
          this.queryAll.pagesize = res.data.data.pageSize
          this.queryAll.totalNum = res.data.data.totalNum
          this.settlementtableData = res.data.data.pages
          this.loading = false
          this.settlementtableData.forEach(item => {
            item.berthTime ? item.berthTime = dfilters.getProcessingDate(item.berthTime, '0') : item.berthTime = ''
          })
        }
      })
    },
    // 单击主列表
    async handlerClick(row) {
      this.invoiceMsg = ''
      this.cullListStatus = ''
      this.invoiceMsg = row
      this.shipUnloadingTableData = []
      this.deliverGoodsTableData = []
      await api.getShipUnloadingData(row.id).then(res => {
        if (res.status == '200') {
          if (res.data.data) {
            this.shipUnloadingTableData = res.data.data
          }
        }
      })
      await api.getDeliverGoodsData(row.id).then(res => {
        if (res.status == '200') {
          if (res.data.data) {
            this.deliverGoodsTableData = res.data.data
          }
        }
      })
    },
    // 查询
    searchClick(searchData) {
      this.queryAll.startpage = 1
      this.queryAll = Object.assign(this.queryAll, searchData)
      this.invoiceMsg = ''
      this.shipUnloadingTableData = []
      this.deliverGoodsTableData = []
      this.getDataList()
    },
    // 码单详情按钮
    locationUpdateModel(num, val, row) {
      if (!this.drawerInner) {
        this.drawerInner = true
      }
      this.cullListStatus = ''
      this.queryAll1.workDate = ''
      this.queryAll1.workTime = ''
      this.cargoInfoId = row.cargoInfoId
      if (num == 0) {
        this.cullListStatus = '0'
        this.$nextTick(() => {
          this.getCodeListData()
        })
      } else {
        this.cullListStatus = '1'
        this.$nextTick(() => {
          this.getCodeListData1()
        })
      }
    },
    // 获取卸船检尺码单详情
    async getCodeListData() {
      this.queryAll1 = Object.assign(this.queryAll1, { id: this.cargoInfoId })
      await api.getCodeListData(this.queryAll1).then(res => {
        if (res.status == '200') {
          this.queryAll1.startpage = res.data.data.pageNum
          this.queryAll1.pagesize = res.data.data.pageSize
          this.queryAll1.totalNum = res.data.data.totalNum
          this.codeListtableData = res.data.data.pages
        }
      })
    },
    // 获取发货检尺码单详情
    async getCodeListData1() {
      this.queryAll1 = Object.assign(this.queryAll1, { id: this.cargoInfoId })
      await api.getCodeListData1(this.queryAll1).then(res => {
        if (res.status == '200') {
          this.queryAll1.startpage = res.data.data.pageNum
          this.queryAll1.pagesize = res.data.data.pageSize
          this.queryAll1.totalNum = res.data.data.totalNum
          this.codeListtableData = res.data.data.pages
        }
      })
    },
    // 码单详情查询按钮
    searchClickMd() {
      this.queryAll1.startpage = 1
      if (this.cullListStatus == '0') {
        this.getCodeListData()
      } else {
        this.getCodeListData1()
      }
    },
    // 完工证按钮
    // async handleDelete(val, id) {
    //     const confirmRes = await this.$confirm(
    //         '此操作将永久删除该数据, 是否继续?',
    //         '提示',
    //         {
    //             confirmButtonText: '确定',
    //             cancelButtonText: '取消',
    //             type: 'warning'
    //         }
    //     ).catch(err => { })
    //     if (confirmRes !== 'confirm') {
    //         return this.$message.info('已经取消删除')
    //     }
    //     this.subDelete(id)
    // },
    async subDelete(id) {
      const params = {
        id: id,
        statementId: this.invoiceMsg.id
      }
      await api.deleteInvoiceData(params).then(res => {
        if (res.status == '200') {
          this.getDataList()
          return this.$message.success(res.data.msg)
        }
      })
    },
    // 关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => { });
    },
    // 每页显示的条数
    sizeChange(val) {
      this.queryAll.pagesize = val
      this.getDataList()
    },
    sizeChange1(val) {
      this.queryAll1.pagesize = val
      this.getDataList()
    },
    // 当前页
    pageChange(val) {
      this.queryAll.startpage = val
      this.getDataList()
    },
    pageChange1(val) {
      this.queryAll1.startpage = val
      this.getDataList()
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../../assets/searchfrom.less";
// @import "../../../assets/table";

.el-dialog-div {
    height: 60vh;
    overflow: auto;
}

.el-button /deep/ {
    margin-left: 6px !important;
}

/deep/ .dialog .el-dialog__body {
    padding-top: 0;
}

/deep/ .dialog .sear .el-form--inline .el-form-item {
    margin-right: 0;
}

/deep/ .commonSearch {
    border-top: none;
    position: absolute;
    z-index: 10;
    width: 100%;
    padding-right: 0;
    box-shadow: 0px 2px 4px 0px #e3e5ee;
    border-bottom: 1px solid #e1e4eb;

    /deep/ .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: auto;
    }
}

.transformDiv {
    border: 1px solid rgba(225, 228, 235, 1);
    box-shadow: -2px 0px 4px rgba(238, 239, 243, 1);
    opacity: 1;
    width: 7%;
    float: left;
}

.search_form1 {
    background-color: #f5f7fa;
    color: #303133;
    border-radius: 0px;
    border: 1px solid #e1e4eb;
    font-size: 14px;
    color: #606266;
    border-bottom: none;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
}

/deep/ .el-collapse {
    border-bottom: 0px solid #ebeef5;
}

/deep/ .el-collapse-item__content {
    padding-bottom: 0px;
}

/deep/ .el-form-item__content {
    margin-bottom: 10px;
}

/deep/ .drawer .locationQ_H .el-input__inner {
    width: 603px !important;
}

.el-upload-list__item-name {
    color: #606266;
    display: block;
    overflow: hidden;
    line-height: 32px;
    padding-left: 4px;
    text-overflow: ellipsis;
    transition: color 0.3s;
    white-space: nowrap;
}

.el-upload__tip {
    font-size: 12px;
    color: #606266;
    width: 218px;
    height: 16px;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    line-height: 12px;
    color: rgba(144, 147, 153, 1);
    opacity: 1;
}

.drawer/deep/ .el-input__inner {
    width: 150px;
    height: 28px;
}

.collapse_item {
    background-color: #f5f7fa;
    border: 1px solid #e1e4eb;
    opacity: 1;
    border-radius: 4px 4px 0px 0px;
}

.workLineInfo_Plan {
    background-color: #fff;
    border: 1px solid rgba(225, 228, 235, 1);
}

/deep/ .workLineInfo_Plan .el-form-item__content {
    width: 100%;
}

/deep/ .workLineInfo_Plan .el-form-item__content .el-input__inner {
    width: 100%;
}

/deep/.el-drawer__body {
    border-top: 2px solid #e6e6eb;
}
/deep/ .el-drawer__header {
  margin-bottom: 0px;
  padding: 16px;
//   border-bottom: 1px solid gainsboro;
}
</style>
